import React, {Component} from 'react'
import { Menu, Icon } from 'antd'
import styles from './SideMenu.less'
import menu from '../../config/menu.js'
import { withRouter } from 'react-router-dom'


const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup

@withRouter
class SideMenu extends Component {

  constructor(props) {
    super(props)
  }


  handleSelect(key) {
    this.props.history.push(key)
  }


  render() {
    return (
      <div className={styles.side}>
        <Menu
          onClick={() => {}}
          theme="dark"
          mode="inline"
          defaultOpenKeys={['/' + this.props.location.pathname.split('/')[1]]}
          defaultSelectedKeys={[this.props.location.pathname]}
          onSelect={({key}) => {this.handleSelect(key)}}
        >
          {
            menu.map((item, index) => {
              return (
                item.children && item.children.length > 0 
                ? (
                  <SubMenu key={item.key} title={<span><Icon type={item.icon}></Icon><span>{item.title}</span></span>}>
                    {
                      item.children.map((listItem) => {
                        return (
                          <Menu.Item key={item.key + listItem.key}>
                            <span>{listItem.title}</span>
                          </Menu.Item>
                        )
                      })
                    }
                  </SubMenu>
                )
                : (
                  <Menu.Item key={item.key}>
                    <Icon type={item.icon}></Icon>
                    <span>{item.title}</span>
                  </Menu.Item>
                )
              )
            })
          }
        </Menu>
      </div>
    )
  }
}

export default SideMenu
